部署 Node.js app 在 Heroku


Posted by ai86109 on 2020-10-20

前言

部署這件事,要自己買一台主機,在上面更改各種設定,連結資料庫,這一拖拉庫的步驟就夠讓新手卻步的了,更別提一路上可能碰到的各種花式問題。

Heroku 就像部署的救星,他提供一個空間,你不必去自己安裝遠端主機的系統,設定防火牆,搞定資料庫等等麻煩的東西,可以讓你輕鬆、快速的部署。


安裝 Heroku

  1. 安裝前可以先去 heroku 創一個帳號

  2. 使用 command line 安裝,這部分可以參考官方的文件
    brew install heroku/brew/heroku

  3. 之後就可以用 heroku login,會打開瀏覽器,按 log in 即可


設定 Node.js 專案檔

  1. package.json 裡面加上

    "engines": {
    "node": "12.x"
    },
    

    官方文件

  2. 並且在 package.json 設定
    ”start": "node index.js",
    也可以像這邊說到的,去建立一個 Procfile 去告訴 heroku 你執行的時候要跑什麼指令

  3. 在程式碼 port 的地方設定環境變數,process.env 可以取得環境變數
    const PORT = process.env.PORT || 5000

  4. 可以用 heroku local web 測試有沒有成功跑起來

    [WARN] ENOENT: no such file or directory, open 'Procfile'
    [OKAY] package.json file found - trying 'npm start'
    

    這邊的意思是因為沒找到 Procfile,所以用 npm start
    官方文件


把專案檔 push 到 heroku

  1. 把 git 設定好
    .
    因為 heroku 是利用 git push 上去的,所以 local 端要先把 git 那些設定好,也要記得把 gitignore 設定好。

  2. 在 heroku 建立一個 app heroku create,他這邊也會同時幫你加好 remote url,但你現在點網址進去會沒東西,因為你還沒部署上去。
    官方文件

  3. git push heroku master,等他跑完就成功部署了

  4. 輸入 heroku open 就會幫你打開網頁,setting 裡面也可以看到你這個專案的網址

如果你的專案沒有需要用到資料庫,以上跑完就部署完成了。


資料庫設定

在這邊我們選擇使用的是 ClearDB MySQL

安裝的方式很簡單,就是安裝插件的感覺 heroku addons:create cleardb:ignite,裝好之後可以去setting 的 Config Vars 那邊看就會有,並且附上環境變數 CLEARDB_DATABASE_URL,這個等一下會用到。

安裝完之後要來將 app 連到資料庫,之前說過如果直接把帳密等資訊都放在 config 會有風險,所以我們要用其他形式來幫我們帶入資料庫的資訊。

看一下 Node.js 專案裡面 model 的 index.js,可以看到一行如果
if (config.use_env_variable) 是 true 的話,就會用 config.use_env_variable 提供的東西,所以我們就到 config 裡面的 production 加上 "use_env_variable": "CLEARDB_DATABASE_URL",也就是我們剛剛看到的資料庫資訊的環境變數,process.env[config.use_env_variable] 就會去吃你 heroku 上面的環境變數,是一行包含 host, 帳密, DB 的字串。

但因為我們是用 Sequelize CLI,所以在建立資料庫時必須要跑 npx sequelize-cli db:migrate 才會建立,因此我們回到 package.json 改成這樣:

"scripts": {
  "db:migrate": "npx sequelize-cli db:migrate",
  "start": "npm run db:migrate && node index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
}

這樣在 deploy 的時候就會先跑 db migrate,再來跑 node index.js

設定好之後,只要重新 git push 上去就完成部署了!


總結

使用 heroku 部署真的會發現相較於自己去搞一個主機,設定防火牆等等東西來的方便,很適合用來建立一個簡單的專案使用,另外也可以使用他的環境變數來做很多事,像是我也有用到的改變時區等等。

利用他在環境變數內提供的資料庫資訊,也可以輕鬆地在 local 端使用像是 Sequel Pro 等軟體,來操作資料庫的內容,真的是滿不錯的部署空間。


#Heroku #node.js #Config vars #Deploy #部署







Related Posts

[FE102] 前端必備:網頁與伺服器的溝通

[FE102] 前端必備:網頁與伺服器的溝通

How to build CICD with Jenkins as code based on container

How to build CICD with Jenkins as code based on container

Custom HTML5 Video Player

Custom HTML5 Video Player


Comments